<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/left.css">
	<link rel="stylesheet" href="css/jquery.dialogbox.css">
	<script src="js/jquery.min.js" type="text/javascript"></script>
	<script src="js/bootstrap.min.js" type="text/javascript"></script>
	<script src="js/vue.js"></script>
	<script src="js/jquery.dialogBox.js"></script>
	<script type="text/javascript">
        $(function(){
            var vue = new Vue({

                el:'#app',
                data:{
                    pages:1,
					pages2:1,
					pages3:1,
                    <!-- 调整分页数据,查询参数设置-->
                    param:{resType:0,page:1,rows:8},
                    param2:{subType:0,page:1,rows:8},
					param3:{type:0,page:1,rows:8},
                    url:'http://localhost:8889',
                    reverses:[],
                    classInfoes:[],
					dateres:[]
                },
                methods:{

                    query3:function(){
                        var that = this;
                        var info ={
                            page:that.param.page,
                            rows:that.param.rows,
                            type:1
						}
                        $.getJSON(that.url+'/student/queryreverse',info,function(data){
                            that.dateres = data.list;
                            that.pages3 =  data.pages;
                            console.log(data)
                        })

					},
                    //今天及以后的预约信息 第二栏
                    query:function () {
                        var that = this;
                        var info = {
                            page:that.param.page,
                            rows:that.param.rows,
							resType:1
                        }
                        $.getJSON(that.url+'/student/queryreverse',info,function(data){
                            that.reverses = data.list;

                            that.pages =  data.pages;
                        })
                    },
                    query2:function () {
                        var that = this;
                        var ps = {
                            page:that.param2.page,
                            rows:that.param2.rows
                        }

                        if(that.param.subType>0){
                            ps.subId = that.param2.subType;
                            console.log(ps.subId)
                        }
                        $.getJSON(that.url+'/class/query',ps,function(data){
                            that.classInfoes = data.list;
                            that.pages2 =  data.pages;
                        })
                    },

                    <!--分页函数-->
                    setpage:function(page){
                        this.param.page = page;
                        this.query();
                    },
                    setpage2:function(page){
                        this.param2.page = page;
                        this.query2();
                    },
                    setpage3:function(page){
                        this.param3.page = page;
                        this.query3();
                    },
                    order:function(classId,reverse){
                        var that = this;
                        $('#type-delBox').dialogBox({
                            hasClose: true,
                            hasBtn: true,
                            width: 300,
                            height: 200,
                            confirmValue: '确认',
                            confirm: function(){
                                if(reverse>=3){
                                    setTimeout(function(){
                                        $('#type-delBox2').dialogBox({
                                            autoHide: true,
                                            time: 2000,
                                            width:300,
                                            height:60,
                                            content: '该课程预约人数已上限！'
                                        });
                                    }, 500);
                                }else{
                                    location.href="reverse.html?classId="+classId;
                                }
                            },
                            cancelValue: '取消',
                            title: '提醒',
                            content: '你确定预约该课程吗！'
                        });
                    }
                }
            })
            vue.query();
            vue.query2();
            vue.query3();
            $("#header").load("header.html");
            $("#left").load("left.html");
        })
	</script>
	<title>梳碧湖驾校预约管理系统</title>
</head>
<body>
<div class="container-fluid bgcon" id="app">
	<div class="row" id="header">

	</div>
	<div class="row">
		<div class="col-md-2" id="left">

		</div>
		<div class="col-md-9 navbody"style="margin-left:30px;margin-top:10px">
			<div class="row">
				<div class="col-md-4"><h3 class="glyphicon glyphicon-list"> 梳碧湖驾校预约课程信息
				</h3></div>
				<div class="col-md-6"></div>
			</div>
			<div class="row"style="margin-top:10px">
				<ul class="nav nav-tabs" role="tablist">
					<li role="presentation" class="active">
						<a href="#res" aria-controls="coa" role="tab" data-toggle="tab">今日预约</a>
					</li>
					<li role="presentation">
						<a href="#res2" aria-controls="profile" role="tab" data-toggle="tab">预约信息</a>
					</li>
					<li role="presentation">
						<a href="#class" aria-controls="profile" role="tab" data-toggle="tab">全部课程</a>
					</li>
				</ul>

				<!-- Tab panes -->
				<div class="tab-content">
					<!--今日预约-->
					<div role="tabpanel" class="tab-pane active" id="res">
						<div class="row" style="margin-top: 15px">
							<div class="col-md-12">
								<div class="table-responsive">
									<table class="table table-bordered table-hover table-striped" style="line-height: 57px">
										<thead class="thead">
										<tr>
											<th class="text-center">序号</th>
											<th class="text-center">预约学员</th>
											<th class="text-center">性别</th>
											<th class="text-center">电话</th>
											<th class="text-center">预约科目</th>
											<th class="text-center">预约教练</th>
											<th class="text-center">预约时间</th>
											<th class="text-center">场次</th>
											<th class="text-center">开始时间</th>
											<th class="text-center">课时</th>
											<th class="text-center" colspan="3">状态</th>
										</tr>
										</thead>
										<tbody v-for="(r,index) in dateres">
                                        <tr v-for="(cil,cindex) in r.classInfoList" class="text-center" style="height:47px">
                                            <td>{{index+cindex+1}}</td>
                                            <td>{{r.stuName}}</td>
                                            <td v-if="r.stuSex === 1">男</td>
                                            <td v-else-if="r.stuSex === 0">女</td>
                                            <td>{{r.phone}}</td>
                                            <td>{{cil.subject.subType}}</td>
                                            <td>{{cil.coach.coaName}}</td>
                                            <td>{{cil.teaTime}}</td>
                                            <td>{{cil.classSess}}</td>
											<td v-if="cil.classSess=='上午场'">9:00</td>
											<td v-if="cil.classSess=='下午场'">14:00</td>
                                            <td>{{cil.classHour}}</td>
											<td>
												<span style="color: #087c10;font-weight: bold">已预约</span>
											</td>
										</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-md-12 text-center">
								<nav aria-label="Page navigation">
									<ul class="pagination" style="margin: 0">
										<li @click="setpage3(1)">
											<a href="#" aria-label="Previous">
												<span aria-hidden="true">&laquo;</span>
											</a>
										</li>
										<li v-for="p in pages3" @click="setpage(p)">
											<a href="#">{{p}}</a>
										</li>
										<li @click="setpage3(pages3)">
											<a href="#" aria-label="Next">
												<span aria-hidden="true">&raquo;</span>
											</a>
										</li>
									</ul>
								</nav>
							</div>
						</div>
					</div>
					<!--预约信息-->
					<div role="tabpanel" class="tab-pane" id="res2">
						<div class="row" style="margin-top: 15px">
							<div class="col-md-12">
								<div class="table-responsive">
									<table class="table table-bordered table-hover table-striped" style="line-height: 57px">
										<thead class="thead">
										<tr>
											<th class="text-center">序号</th>
											<th class="text-center">预约学员</th>
											<th class="text-center">性别</th>
											<th class="text-center">电话</th>
											<th class="text-center">预约科目</th>
											<th class="text-center">预约教练</th>
											<th class="text-center">预约时间</th>
											<th class="text-center">场次</th>
											<th class="text-center">开始时间</th>
											<th class="text-center">课时</th>
											<th class="text-center" colspan="3">操作</th>
										</tr>
										</thead>
                                        <tbody v-for="(r,index) in reverses">
                                        <tr v-for="(cil,cindex) in r.classInfoList" class="text-center" style="height:47px">
                                            <td>{{index+cindex+1}}</td>
                                            <td>{{r.stuName}}</td>
                                            <td v-if="r.stuSex === 1">男</td>
                                            <td v-else-if="r.stuSex === 0">女</td>
                                            <td>{{r.phone}}</td>
                                            <td>{{cil.subject.subType}}</td>
                                            <td>{{cil.coach.coaName}}</td>
                                            <td>{{cil.teaTime}}</td>
                                            <td>{{cil.classSess}}</td>
											<td v-if="cil.classSess=='上午场'">9:00</td>
											<td v-if="cil.classSess=='下午场'">14:00</td>
                                            <td>{{cil.classHour}}</td>
											<td>
											<span style="color: #087c10;font-weight: bold">已预约</span>
											</td>
										</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-md-12 text-center">
								<nav aria-label="Page navigation">
									<ul class="pagination" style="margin: 0">
										<li @click="setpage(1)">
											<a href="#" aria-label="Previous">
												<span aria-hidden="true">&laquo;</span>
											</a>
										</li>
										<li v-for="p in pages" @click="setpage(p)">
											<a href="#">{{p}}</a>
										</li>
										<li @click="setpage(pages)">
											<a href="#" aria-label="Next">
												<span aria-hidden="true">&raquo;</span>
											</a>
										</li>
									</ul>
								</nav>
							</div>
						</div>
					</div>
					<!--预约课程-->
					<div role="tabpanel" class="tab-pane" id="class">
						<div class="row" style="margin-top: 15px">
							<div class="col-md-12">
								<div class="table-responsive">
									<table class="table table-bordered table-hover table-striped">
										<thead class="thead">

										<tr>
											<th width="8%" class="text-center">序号</th>
											<th width="10%" class="text-center">教练名称</th>
											<th width="7%" class="text-center">性别</th>
											<th width="15%" class="text-center">教学时间</th>
											<th width="7%" class="text-center">场次</th>
											<th width="7%" class="text-center">开始时间</th>
											<th width="7%" class="text-center">课时</th>
											<th width="10%" class="text-center">所教科目</th>
											<th width="8%" class="text-center">选课人数</th>
											<th width="10%" class="text-center">备注</th>
											<th class="text-center" colspan="3">状态</th>
										</tr>
										</thead>
										<tbody>
										<tr v-for="(c,index) in classInfoes" class="text-center">
											<td>{{index+1}}</td>
											<td>{{c.coach.coaName}}</td>
											<td v-if="c.coach.coaSex === 1">男</td>
											<td v-else-if="c.coach.coaSex === 0">女</td>
											<td>{{c.teaTime}}</td>
											<td>{{c.classSess}}</td>
											<td v-if="c.classSess=='上午场'">9:00</td>
											<td v-if="c.classSess=='下午场'">14:00</td>
											<td>{{c.classHour}}</td>
											<td>{{c.subject.subType}}</td>
											<td>{{c.reverse}}</td>
											<td>{{c.remark}}</td>
											<td>
												<button @click="order(c.classId,c.reverse)" class="btn btn-sm btn-primary">预约</button>
											</td>
										</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-md-12 text-center">
								<nav aria-label="Page navigation">
									<ul class="pagination" style="margin: 0">
										<li @click="setpage2(1)">
											<a href="#" aria-label="Previous">
												<span aria-hidden="true">&laquo;</span>
											</a>
										</li>
										<li v-for="p in pages2" @click="setpage2(p)">
											<a href="#">{{p}}</a>
										</li>
										<li @click="setpage2(pages2)">
											<a href="#" aria-label="Next">
												<span aria-hidden="true">&raquo;</span>
											</a>
										</li>
									</ul>
								</nav>
							</div>
						</div>
					</div>

				</div>
			</div>

		</div>

		</div>
	</div>
</div>
<div id="type-delBox"></div>
<div id="type-delBox2"></div>
</body>
</html>
